<template>
  <div class="selectObject">
      <el-button type="primary" @click="openDialog" :disabled="!mixEditable">{{ buttonText }}</el-button>
      <pm-selected-types
      v-if="dialogVisible"
      :dialog-visible.sync="dialogVisible"
      :select-types="finalSelectTypes"
      :current-data="currentData"
      :title="dialogTitle"
      :is-multiple="multiple"
      :filterIsOrg="filterIsOrg"
      @loadNodeData="loadNodeData"
      @change="changeRange"
    />
  </div>
</template>

<script>
export default {
  name: "selectObject",
  components: {},
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    // 按钮模式
    isButton: {
      type: Boolean | String,
      default: "true"
    },
    // 数据实体，
    entityModel: null,
    // 选择类型
    objectTypes: {
      type: Array,
      default: () => {
        return ['emp']
      }
    },
    otherTypes: {
      type: Array,
      default: () => []
    },
    // 当前节点数据
    currentData: {
      type: Array,
      default: () => []
    },
    buttonText: {
      type: String,
      default: '新增'
    },
    dialogTitle: {
      type: String,
      default: '添加成员'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterIsOrg: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeName: 'emp',
      dialogVisible: false,
      // 所有类型
      selectTypes: [
          {
            name: '人员',
            code: 'emp',
            type: 'emp',
            rangeMode: {
              emp: 'dimension',
            },
            rangeData: {
              emp: { dimensionCode: 'def_dimension' },
            },
          },
          {
            name: '机构',
            code: 'org',
            type: 'org',
            rangeMode: {
              org: 'dimension',
            },
            rangeData: {
              org: { dimensionCode: 'def_dimension' },
            },
          },{
          name: '部门',
          code: 'dept',
          type: 'dept',
          rangeMode: {
            dept: 'rootOrgs'
          },
          rangeData: {
            dept: null
          }
        },
          {
            name: '角色',
            code: 'role',
            type: 'role',
            rangeMode: {
              role: 'roles',
            },
            rangeData: {
              role: null,
            },
          },
          {
            name: '岗位',
            code: 'position',
            type: 'position',
            rangeMode: {
              org: 'dimension',
            },
            rangeData: {
              org: { dimensionCode: 'def_dimension' },
            },
          },
          {
            name: '工作组',
            code: 'group',
            type: 'group',
            rangeMode: {
              org: 'dimension',
            },
            rangeData: {
              org: { dimensionCode: 'def_dimension' },
            },
          },
        ]
    };
  },
  computed: {
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    finalSelectTypes() {
      return this.selectTypes.concat(this.otherTypes).filter(i => this.objectTypes.includes(i.code))
    }
  },
 watch: {
    // value: {
    //   immediate: true,
    //   handler(val) {
    //     console.log(val,'===val')
    //   }
    // }
  },
  created() {
    this.activeName = this.objectTypes[0]
  },
  mounted() {
  },
  methods: {
    changeRange(arr) {
      this.$emit('changeSelect', arr)
    },
    cancel() {
      this.dialogVisible = false
    },
    reset() {

    },
    openDialog() {
      this.dialogVisible = true
    },
    handleClick(tab) {
      console.log('点击' + tab)
    },
    async loadNodeData(type, parent, keywords) {
      const data = await this.$listeners.loadNodeData({type, parent, keywords})
      return data
    }
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
</style>
